<template>
    <el-container class="glass p-2">
        <el-header height="30px">
            <el-page-header @back="goBack">
                <template #content>
                    <span class="text-large font-600 mr-3">环球导航</span>
                </template>
            </el-page-header>
            <div class="position-absolute top-0 end-0 px-2">
                <ThemeSwitch />
            </div>
        </el-header>
        <el-main class="pt-0">
            <div class="glass rounded-1">
                <SearchBar v-model="keyword" @input="onInputKeyword" />
            </div>
            <el-card class="mt-3">
                <div class="mb-3">搜索 <el-text type="danger" tag="b">{{ keyword }}</el-text> 结果（共 {{ count }} 条记录）</div>
            </el-card>
            <el-card class="mt-3" v-for="(item, idx) of list" :key="idx">
                <template #header><strong>{{ item.text }}</strong></template>
                <div class="flex flex-wrap">
                    <el-link class="me-4 mb-3" :href="item2.link" target="_blank" v-for="(item2, idx2) of item.data"
                        :key="idx2">
                        {{ item2.text }}
                    </el-link>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script setup>
import SearchBar from '@/components/searchbar/SearchBar.vue';
import ThemeSwitch from '@/components/theme-switch/ThemeSwitch.vue';
import allData from '@/mock/data/all';
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const keyword = ref(route.query.s);

const list = ref([]), count = ref(0);
let data = [];

const getList = (kw) => {
    count.value = 0;
    list.value = [];
    if (kw.length == 0) {
        return;
    }
    for (let item of allData) {
        for (let item2 of item.data) {
            data = item2.data.filter(v => v.text.includes(kw));
            if (data.length > 0) {
                item2.data = data;
                list.value.push(item2);
                count.value += data.length;
            }
        }
    }
}
getList(keyword.value);

const onInputKeyword = (value) => {
    getList(value);
}

const goBack = () => {
    router.push('/');
}
</script>

<style>
.el-menu-item {
    height: 40px;
}

.el-card__header {
    padding: 15px;
}

.el-card__body {
    padding: 15px;
    padding-bottom: 0;
}
</style>@/mock/all/_all